<template>
  <PageContainer>
    <a-layout>
      <a-layout-content>
        <a-card title="担保公司管理" style="margin-bottom: 20px">
          <a-form layout="inline" :model="searchFormState" ref="searchForm" @finish="search">
            <a-form-item label="状态">
              <a-select v-model:value="searchFormState.status" placeholder="请选择状态">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">禁用</a-select-option>
                <a-select-option value="0">启用</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="doAdd">新增</a-button>
            </a-form-item>
          </a-form>
        </a-card>
        <a-table
          :data-source="tableData"
          :pagination="pagination"
          :loading="loading"
          :columns="columns"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="showEditModal(record.id)">修改</a-button>
            </template>
          </template>
        </a-table>
      </a-layout-content>
    </a-layout>
    <a-modal
      :title="!isEditing ? '新增担保公司' : '修改担保公司'"
      :visible="isModalVisible"
      @ok="handleOk"
      @cancel="handleCancel"
      transitionName="slide-fade"
    >
      <a-form :model="formState" :rules="rules" ref="formRef" layout="vertical">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="统一社会信用代码" name="unifiedSocialCreditCode">
              <a-input v-model:value="formState.unifiedSocialCreditCode" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="公司全名" name="companyFullName">
              <a-input v-model:value="formState.companyFullName" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="服务有效期" name="serviceValidityPeriod">
              <a-range-picker
                v-model:value="formState.serviceValidityPeriod"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="状态" name="status">
              <a-select v-model:value="formState.status" placeholder="请选择状态">
                <a-select-option value="0">启用</a-select-option>
                <a-select-option value="1">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="企业简称" name="shortName">
              <a-input v-model:value="formState.shortName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="企业编码" name="enterpriseCode">
              <a-input disabled v-model:value="formState.enterpriseCode" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="联系人手机号" name="contactPhone">
              <a-input v-model:value="formState.contactPhone" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系人电话" name="contactTelephone">
              <a-input v-model:value="formState.contactTelephone" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="联系人姓名" name="contactName">
              <a-input v-model:value="formState.contactName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系地址" name="contactAddress">
              <a-input v-model:value="formState.contactAddress" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="备注">
              <a-textarea v-model:value="formState.remark" :rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </PageContainer>
</template>

<script lang="ts" setup>
import { PageContainer } from '@ant-design-vue/pro-layout';
import { reactive } from 'vue';
import { getData } from '@/services';
import usePage from '@/composables/crud/usePage';
import useAddEditModal from '@/composables/crud/useAddEditModal';

const searchFormState = reactive({
  name: '',
  status: '',
});

const { tableData, pagination, search, loading, searchForm } = usePage(
  'auth/tTenant',
  searchFormState,
);

const rules = {
  unifiedSocialCreditCode: [
    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
    {
      pattern: /^[0-9A-Z]{18}$/,
      message: '统一社会信用代码格式不正确',
      trigger: 'blur',
    },
  ],
  companyFullName: [{ required: true, message: '请输入公司全称', trigger: 'blur' }],
  serviceValidityPeriod: [{ required: true, message: '请输入服务有效期', trigger: 'blur' }],
  status: [{ required: true, message: '请输入状态', trigger: 'blur' }],
  shortName: [{ required: true, message: '请输入简称', trigger: 'blur' }],
  enterpriseCode: [{ required: true, message: '请输入企业代码', trigger: 'blur' }],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' },
  ],
  contactTelephone: [
    { pattern: /^\d{3}-\d{8}|\d{4}-\d{7,8}$/, message: '请输入有效的座机号码', trigger: 'blur' },
  ],
  contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
  contactAddress: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
  remark: [{ max: 200, message: '备注不能超过200个字符', trigger: 'blur' }],
};

const formState = reactive({
  id: '',
  unifiedSocialCreditCode: '',
  companyFullName: '',
  serviceValidityPeriod: '',
  status: '',
  shortName: '',
  enterpriseCode: '',
  contactPhone: '',
  contactTelephone: '',
  contactName: '',
  contactAddress: '',
  remark: '',
});

const { isModalVisible, isEditing, formRef, showAddModal, showEditModal, handleOk, handleCancel } =
  useAddEditModal('auth/tTenant', formState, search);

const doAdd = async () => {
  const res = await getData('/api/elog/tenant/newEnterpriseCode');
  formState.enterpriseCode = res.data;
  showAddModal();
};
const columns = [
  {
    title: '企业编码',
    dataIndex: 'enterpriseCode',
    key: 'enterpriseCode',
  },
  {
    title: '公司全名',
    dataIndex: 'companyFullName',
    key: 'companyFullName',
  },

  {
    title: '服务有效期开始',
    dataIndex: 'serviceValidityPeriodBegin',
    key: 'serviceValidityPeriodBegin',
  },
  {
    title: '服务有效期结束',
    dataIndex: 'serviceValidityPeriodEnd',
    key: 'serviceValidityPeriodEnd',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    customRender: ({ text }) => {
      switch (text) {
        case '1':
          return '禁用';
        case '0':
          return '启用';
        default:
          return '未知';
      }
    },
  },
  {
    title: '联系人姓名',
    dataIndex: 'contactName',
    key: 'contactName',
  },
  {
    title: '联系人电话',
    dataIndex: 'contactTelephone',
    key: 'contactTelephone',
  },

  { title: '操作', key: 'action' },
];
</script>

<style lang="less" scoped></style>
